import React from "react";
import {List, InputItem, Button, Toast} from 'antd-mobile'
import {createForm} from 'rc-form'
import {Link} from 'umi'
import {useStoreHook} from "think-react-store";

import './index.less'

function Login(props) {
  const {getFieldProps, validateFields} = props.form

  const {user: {registerAsync}} = useStoreHook()

  const handleSubmit = () => {
    validateFields((err, val) => {
      if (err) {
        Toast.fail('请将信息补充完整')
        return
      }
      if(val.password !== val.password2) {
        Toast.fail('两次密码必须一致')
        return
      }
      registerAsync(val)
    })
  }

  return (
    <div className='register-page'>
      <List
        renderHeader={() => '用户注册'}
      >
        <List.Item>
          <InputItem
            {...getFieldProps('nickName', {
              rules: [{required: true}],
              initialValue: ''
            })}
            placeholder='用户昵称'
          >
            用户昵称：
          </InputItem>
        </List.Item>
        <List.Item>
          <InputItem
            {...getFieldProps('userName', {
              rules: [{required: true}],
              initialValue: ''
            })}
            placeholder='用户名'
          >
            用户名：
          </InputItem>
        </List.Item>
        <List.Item>
          <InputItem
            {...getFieldProps('password', {
              rules: [{required: true}],
              initialValue: ''
            })}
            placeholder='密码'
            type='password'
          >
            密码：
          </InputItem>
        </List.Item>
        <List.Item>
          <InputItem
            {...getFieldProps('password2', {
              rules: [{required: true}],
              initialValue: ''
            })}
            placeholder='确认密码'
            type='password'
          >
            确认密码：
          </InputItem>
        </List.Item>
      </List>
      <Button type='warning' onClick={handleSubmit}>注册</Button>
      <div className='login'><Link to='/login'>已有账户？去登录</Link></div>
    </div>
  )
}

export default createForm()(Login)
